<template>
    <view>
        <view class="load" v-if="!loading">
            <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
        </view>
        <block v-else>
            <image class="pa_banner" mode="widthFix"
                src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17341620570101138.png"></image>
            <view class="navBox" :style="isNav ? 'background: #FFFFFF;' : ''">
                <topStatus></topStatus>
                <view class="nav_main">
                    <uni-icons type="left" color="#343434" size="30" @click="goBack()"></uni-icons>
                    <view class="nav_tit">
                        吃货中国
                    </view>
                    <uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons>
                </view>
            </view>
            <view style="height: 182rpx;"></view>

            <view class="mapBox">
                <!-- <view class="mapTitle">
                    <view class="mapTImg">
                        <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734159996804135.png"
                            mode="widthFix" />
                    </view>
                    <view class="mapTCon">xxxxx</view>
                    <view class="mapTImg">
                        <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734159996804135.png"
                            mode="widthFix" />
                    </view>
                </view> -->
                <view class="charts-box" style="height: 400px;">
                    <qiun-data-charts ref="chartRef" canvasId="mapChart" type="map" @getImage="getImage()" :opts="opts" :chartData="chartsDataMap1" />
                    <view class="loading_map" v-if="!isMap">
                        <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17350959090261373.png"
                            mode="aspectFill"></image>
                        <view class="text">
                            正在加载吃货地图...
                        </view>
                    </view>
                </view>

                <view class="shareBox" @click="$refs.shareWX.open()" v-if="isUser != 0">
                    <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734161490140376.png"
                        mode="widthFix" />
                </view>
                <view class="rankBox" @click="nav_to('/pages/foodieChina/foodManlist')" v-if="isUser != 0">
                    <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732534745240412.png"
                    mode="widthFix" />
                    中国吃货排行榜
                </view>
            </view>
            <view class="foodBox">
                <view class="fbBox userBox" v-if="isUser != 0">
                    <view class="userInfo" @click.stop="nav_to('/pages/Awards/myAwards')">
                        <view class="userImg">
                            <image :src="user.HeadImgUrl" mode="widthFix" />
                        </view>
                        <view class="userName hiddenText">{{ user.Name }}</view>
                        <view class="userTags" v-if="MyFoodInfo.Food_Medal">
                            <view class="usericon" v-if="MyFoodInfo.Food_Medal_Icon">
                                <image :src="MyFoodInfo.Food_Medal_Icon" mode="aspectFill"></image>
                            </view>
                            <view class="uTag">{{ MyFoodInfo.Food_Medal }}</view>
                        </view>
                    </view>
                    <view class="testBtn" @click="nav_to('/pages/foodieChina/eatExam')">测一测</view>
                </view>

                <view class="fbBox userBox" v-else>
                    <view class="userInfo">
                        <view class="userImg">
                            <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1735207030555367.png"
                                mode="widthFix" />
                        </view>
                        <view class="userName hiddenText">吃货一枚</view>
                    </view>
                    <view class="testBtn" @click="map_login()">马上登录</view>
                </view>

                <view class="fbBox textLine">
                    已品尝中国美食<text>{{ MyFoodInfo.EatFoodNum || '--' }}</text>种
                    战胜<text>{{ (MyFoodInfo.WinUserRatio * 100).toFixed(2) }}%</text>的用户
                </view>
                <view class="lightText">您是第{{ MyFoodInfo.UserSeq || '--' }}位参加点亮中国美食的用户</view>
                <view class="fbBox foodLight">
                    <!-- <view class="flTitle">已点亮 {{MyFoodInfo.EatFoodNum || '--'}} 种美食</view> -->
                    <view class="chinaFoodList" v-if="chinaFoodList.length > 0">
                        <view class="foodCell" v-for="(item, index) in chinaFoodList" :key="index">
                            <view class="foodProvince">【{{ item.Province }}】</view>
                            <block v-for="(el, i) in item.CityList" :key="i">
                                <view class="foodCity">{{ el.City }}</view>
                                <view class="foodNameList">
                                    <view class="foodName" v-for="(op, x) in el.FoodList" :key="x">
                                        {{ op.FoodName }}
                                    </view>
                                </view>
                            </block>

                        </view>
                    </view>
                    <block v-else>
                        <EmptyBox text="还未点亮任何美食喔~"
                            image="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734168106734369.png"></EmptyBox>
                    </block>
										<view style="height: 20rpx;"></view>
										<BtmLogo></BtmLogo>
                </view>
								
            </view>

            <view class="lightBtn" @click="nav_to('/pages/foodieChina/checkFood')" v-if="isUser != 0">点亮中国美食</view>
            <view class="lightBtn" @click="map_login()" v-else>登录后点亮中国美食</view>
        </block>


        <!-- 微信 分享 转发好友、朋友圈 -->
        <!-- #ifdef MP-WEIXIN -->
        <uni-popup ref="shareWX" type="bottom">
            <view class="x-share">
                <button hover-class="none" open-type="share" class="item" @click="$refs.shareWX.close()">
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"
                        style="margin-bottom: -8rpx;"></image>
                    <span style="margin-bottom: -18rpx;font-size: 32rpx;">转发好友</span>
                </button>
                <button class="item" @click="wxSharePYQ()">
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"
                        style="margin-bottom: -8rpx;"></image>
                    <span style="margin-bottom: -18rpx;font-size: 32rpx;">分享朋友圈</span>
                </button>
                <button class="item" @click="canvasImage()">
                    <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1724923312810631.png"
                        style="margin-bottom: -8rpx;"></image>
                    <span style="margin-bottom: -18rpx;font-size: 32rpx;">生成海报</span>
                </button>
            </view>

        </uni-popup>

        <uni-popup ref="shareTips">
            <view class="share_tips">
                <view class="img_box">
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715929661502368.png"
                        mode="widthFix"></image>
                </view>
                <view class="tips_close" @click="$refs.shareTips.close()">
                    我知道了
                </view>
            </view>
        </uni-popup>
        <!-- #endif -->
    </view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
// import mapdata from '@/pages/foodieChina/test_map.json';
export default {
    components: {
        topStatus
    },
    data() {
        return {
            loading: false,
            PageIndex: 1,
            PageSize: 10,
            isMore: true,
            isNav: false,
            fixboxHeight: 100,
            chartsDataMap1: { series: [] },
            opts: {
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [0, 0, 0, 0],
                dataLabel: true,
                enableScroll: false,
                fontSize: 10,
                extra: {
                    map: {
                        border: true,
                        borderWidth: 1,
                        borderColor: "#fff",
                        fillOpacity: 0.6,
                        mercator: true
                    }
                }
            },
            user: {
                Name: '用户昵称',
                HeadImgUrl: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734162737772820.png',
                tags: '初级吃货'
            },
            chinaFoodList: [],
            MyFoodInfo: {},
            isMap: false,
            isUser: 0,
            imgbase64:'',
        };
    },
    onLoad(e) {
        try {
            const user = uni.getStorageSync('user') || ''
            console.log('》》》》》》》》》》》》》》》》》》》》', user);
            if (user == '') {
                this.isUser = 0
                this.map_login()
            } else {
                this.isUser = 1
                this.init()
            }
        } catch (error) {
            //TODO handle the exception
            this.isUser = 0
            this.init()
        }

    },
    onShow() {
        this.init()
        this.getMyCartNum()
    },
    onUnload() {
        uni.$off('MapUpdate')
    },
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++;
        }
    },
    onPageScroll(e) {
        // console.log(e.scrollTop);
        this.isNav = e.scrollTop > this.fixboxHeight ? true : false
    },
    onShareAppMessage(res) {
        //发送给朋友

        return {
            title: `${uni.getStorageSync('user').Name}邀请您点亮吃货地图`,
            path: `/pages/foodieChina/chinaMap`,
        };
    },
    //分享朋友圈
    onShareTimeline() {
        return {
            title: `${uni.getStorageSync('user').Name}邀请您点亮吃货地图`,
            
        };
    },
    methods: {
        async map_login() {
            let _this = this;
            uni.login({
                provider: 'weixin',
                success: res => {
                    _this.map_wxlogin(res.code);
                },
                fail: err => {
                }
            });
        },
        async map_wxlogin(code) {
            uni.setStorageSync('loginKey', code)
            let c_model = '';
            let c_system = ''
            uni.getSystemInfo({
                success(res) {
                    c_model = res.model;
                    c_system = res.system;
                    uni.setStorageSync('System', res.osName)
                }
            });
            let pid = uni.getStorageSync('pid');
            let res = await this.$api.post('User/WXLogin', {
                Code: code,
                pid: pid
            });

            uni.setStorageSync('xj_token', res.data.Token);

            let user = res.data.UserData;

            uni.setStorageSync('user', user);
            this.$store.commit('setUser', user);


            this.init()

        },
        wxSharePYQ() {
            this.$refs.shareWX.close()
            this.$refs.shareTips.open()
        },
        goBack() {
            const pages = getCurrentPages();
            if (pages.length > 1) {
                // 如果页面栈长度大于1，则说明有上一页，可以返回
                uni.navigateBack();
            } else {
                // 如果没有上一页，则导航到首页
                uni.reLaunch({
                    url: '/pages/tab/home'
                });
            }
        },
        async init() {
            await this.MyFoodMap()
            await this.MyFoodMapData()
            this.loading = true
            await this.getUserInfo()
        },
        async getUserInfo() {
            let res = await this.$api.post('/User/GetUserInfo', { ID: uni.getStorageSync('user').UserID });
            this.user = res.data;
            const user = uni.getStorageSync('user') || ''
            if (user == '') {
                this.isUser = 0
            } else {
                this.isUser = 1
            }
        },

        async MyFoodMap() {
            let res = await this.$api.post('/Food/MyFoodMap')
            this.MyFoodInfo = res.data
            this.chinaFoodList = res.data?.ProvinceList
        },
        async MyFoodMapData() {
            let res = await this.$api.post('/Food/MyFoodMapData')
            // this.chartsDataMap1 = { series: [] }
            this.chartsDataMap1 = { series: res.data.features }
            setTimeout(() => {
                this.isMap = true
            }, 850)
        },
        getImage(e){
            console.log(e.base64,'eee');
            const data = {
                img: e.base64,
                myFoodInfo:this.MyFoodInfo,
                chinaFoodList:this.chinaFoodList,

            }
            this.$store.commit('setMapCanvas',data)
            this.imgbase64 = e.base64
            this.nav_to('/pages/foodieChina/mapCanvas')
        },
        canvasImage() {
            let chartRef = this.$refs.chartRef;
            const img =  chartRef.getImage()
            console.log(img,'dada');
        },
    },
}
</script>
<style lang='scss'>
page {
    background-color: #FFF5E9;
}

.navBox {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    .nav_main {
        padding: 0 14rpx;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 36rpx;
        color: #fff;

        .nav_tit {
            font-weight: bold;
            font-size: 36rpx;
            color: #333333;
        }
    }
}

.pa_banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    // height: 584rpx;
    // background-color: skyblue;
    z-index: -2;
}

/* 定义关键帧 */
@keyframes spin {
    from {
        transform: rotate(0deg);
        /* 从0度开始 */
    }

    to {
        transform: rotate(360deg);
        /* 旋转到360度，即一圈 */
    }
}


.mapBox {
    width: 100%;
    position: relative;

    .loading_map {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 12rpx;
            animation: spin 3s linear infinite;
            /* 动画名称，持续时间，速度曲线，循环次数 */
            transform-origin: center;
            /* 确保旋转是围绕元素的中心进行 */
        }

        .text {
            font-size: 28rpx;
            color: #FF3B02;
        }
    }

    .mapTitle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .mapTImg {
            width: 48rpx;
            height: 32rpx;

            >image {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        .mapTCon {
            font-weight: 500;
            font-size: 28rpx;
            color: #641E0C;
        }
    }

    .shareBox {
        position: absolute;
        right: 56rpx;
        bottom: 100rpx;
        width: 104rpx;
        height: 72rpx;
        background: #FFFFFF;
        border-radius: 35rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 98 !important;

        >image {
            width: 40rpx;
            height: 40rpx;
        }
    }
    .rankBox{
        position: absolute;
        left: 56rpx;
        bottom: 100rpx;
        /* width: 104rpx; */
		padding: 0 20rpx;
        height: 72rpx;
        background: #FFFFFF;
        border-radius: 35rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 98 !important;
        >image {
            width: 40rpx;
            height: 40rpx;
        }
    }
}

.foodBox {
    width: 100%;
    padding: 0 24rpx;

    .fbBox {
        width: 100%;
        padding: 32rpx 24rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
    }

    .userBox {

        display: flex;
        align-items: center;
        justify-content: space-between;

        .userInfo {
            flex: 1;
            display: flex;
            align-items: center;

            .userImg {
                width: 72rpx;
                height: 72rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 16rpx;

                >image {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            .userName {
                max-width: 300rpx;
                font-weight: bold;
                font-size: 32rpx;
                color: #333333;
            }

            .userTags {
                margin-left: 16rpx;
                display: flex;
                align-items: center;

                .usericon {
                    image {
                        width: 40rpx;
                        height: 40rpx;
                        margin: 4rpx 8rpx 0 0;
                    }
                }

                .uTag {
                    height: 40rpx;
                    padding: 0 16rpx;
                    background: #FFF1ED;
                    border-radius: 20rpx;
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FF6030;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .testBtn {
            width: 132rpx;
            height: 56rpx;
            background: linear-gradient(98deg, #FF7114 0%, #FF3B02 100%);
            border-radius: 28rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .textLine {
        font-weight: 500;
        font-size: 28rpx;
        color: #641E0C;
        margin-top: 16rpx;

        >text {
            font-weight: bold;
            font-size: 36rpx;
            color: #FF6030;
            padding: 0 10rpx;
        }
    }

    .lightText {
        padding: 24rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #B58D83;
    }

    .foodLight {
        width: 100%;
        padding-bottom: 200rpx;

        .flTitle {
            width: 100%;
            font-weight: 500;
            font-size: 28rpx;
            color: #641E0C;
        }

        .chinaFoodList {
            width: 100%;

            .foodCell {
                width: 100%;
                margin-top: 24rpx;

                &:first-child {
                    margin-top: 0;
                }

                .foodProvince {
                    /* font-weight: bold; */
                    font-size: 28rpx;
                    color: #641E0C;
                    margin-left: -12rpx;
                }

                .foodCity {
                    font-weight: bold;
                    font-size: 28rpx;
                    /* color: #FF6030; */
                    color: #641E0C;
                    margin: 16rpx 0;
                }

                .foodNameList {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;

                    .foodName {
                        font-weight: 500;
                        font-size: 32rpx;
                        /* color: #641E0C; */
                        color: #FF6030;
                        margin-right: 16rpx;
                    }
                }
            }
        }
    }
}




.lightBtn {
    position: fixed;
    bottom: 90rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 456rpx;
    height: 88rpx;
    background: linear-gradient(98deg, #FF7114 0%, #FF3B02 100%);
    box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(195, 100, 28, 0.44);
    border-radius: 44rpx;
    z-index: 98 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
}

.x-share {
    background-color: #ffffff;
    width: 750rpx;
    border-radius: 20rpx 20rpx 0 0;
    padding: 40rpx 20rpx 80rpx;
    display: flex;
    box-sizing: border-box;

    .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        image {
            width: 64rpx;
            height: 64rpx;
            margin-bottom: 10rpx;
        }

        span {
            color: #2e2e2e;
        }
    }
}

.share_tips {
    width: 100vw;
    height: 100vh;
    padding-top: 200rpx;
    background-color: rgba(0, 0, 0, 0.6);
    position: relative;

    .img_box {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .tips_close {
        position: absolute;
        padding: 14rpx 24rpx;
        border-radius: 50rpx;
        border: 4rpx solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 30rpx;
        font-weight: bold;
        top: 41%;
        left: 50%;
        transform: translate(-50%, 0);

        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>